<template>
  <header>
    <md-icon name="arrow-left" class="icon" @click="goBack"></md-icon>
    {{ currentRouterName }}
    <span class="action" @click="goPage(currentAction)">
      {{ currentAction ? currentAction.action : "" }}
      <span
        v-if="currentAction"
        class="iconfont"
        :class="currentAction.icon ? currentAction.icon : ''"
      ></span>
    </span>
  </header>
</template>

<script>
import { Icon } from "mand-mobile";
export default {
  name: "index",
  components: {
    [Icon.name]: Icon
  },
  data() {
    return {
      data: [
        {
          name: "余额",
          action: "明细",
          router: "personBalanceDetail"
        },
        {
          name: "我的订单",
          action: "",
          icon: "iconsousuo",
          router: "search"
        }
      ]
    };
  },
  methods: {
    goPage(currentAction) {
      if (currentAction) {
        this.$commonJs.goPage(currentAction.router);
      }
    },
    goBack() {
      if (window.history.length > 2) {
        if (!this.currentRouterName) {
          this.$router.go(-4);
        } else {
          this.$router.back(-1);
        }
      } else {
        if (this.$route.matched.length === 3) {
          this.$router.push({ name: this.$route.matched[1].name });
        } else {
          this.$router.push({ name: "home" });
        }
      }
    }
  },
  computed: {
    currentRouterName() {
      return this.$store.state.currentRouterName;
    },
    currentAction() {
      let item = this.data.find(item => {
        if (this.currentRouterName === item.name) {
          return item;
        }
      });
      return item ? item : null;
    }
  }
};
</script>

<style scoped lang="stylus">
header{
  height: 88px;
  text-align center;
  line-height 88px;
  background white;
  border-bottom 1px solid #D6D6D6
  font-size:36px;
  font-family:PingFang-SC-Regular;
  color:rgba(51,51,51,1);
  position relative
  .icon{
    position absolute;
    left 24px;
    line-height 88px;
  }
  .action{
    position absolute;
    right  24px;
    line-height 88px;
    font-size 24px;
  }
}
</style>
